import * as echarts from "echarts"
/**
 * @description 预警分析 雷达图
 */
export function leftOptions1 () {
    let indicatorList = [
        {name: '待接单', min: 0, value: 182},
        {name: '待预约', min: 0, value: 126},
        {name: '待装货', min: 0, value: 170},
        {name: '待预约审批', min: 0, value: 48},
        {name: '待调度', min: 0, value: 180}
    ];
    return {
        // backgroundColor:'#FFFFFF',
        grid: {
            top: 0,
            right: 0,
            bottom: 0,
            left: 0,
            containLabel: false
        },
        tooltip: {
            show: true // 弹层数据去掉
        },
        radar: {
            center: ['50%', '50%'], // 外圆的位置
            radius: '65%',
            name: {
                formatter: function (value, indicator) {
                    let num = indicator.value
                    return `{title|${value}：}{value|${num}}`;
                },
                rich: {
                    title: {
                        fontSize: 15,
                        color: '#fff',
                        padding: [0, 0, 0, 0],
                    },
                    value: {
                        color: "#ffe038",
                        fontSize: 15,
                    }
                }

            },
            // TODO:
            indicator: indicatorList,
            splitArea: {
                // 坐标轴在 grid 区域中的分隔区域，默认不显示。
                show: true,
                areaStyle: {
                    // 分隔区域的样式设置。
                    color: ['rgba(17,107,185,0.3)'] // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
                }
            },
            //尖点连接线
            axisLine: {
                // 指向外圈文本的分隔线样式
                lineStyle: {
                    color: 'transparent',
                }
            },
            splitLine: {
                lineStyle: {
                    type: 'solid',
                    color: '#019FE1', // 分隔线颜色
                    width: 2 // 分隔线线宽
                }
            }
        },
        series: [
            {
                type: 'radar',
                symbol: "circle",
                symbolSize: 7,
                color: '#ffdaa0',
                data: [
                    {
                        value: [182, 126, 170, 48, 180],
                        name: '预警分析',
                        //边缘样式
                        lineStyle: {
                            width: 2,
                            color: '#FEE038',
                            cap: 'square'
                        },
                        itemStyle: {
                            borderCap: 'round',
                        },
                        areaStyle: {
                            color: '#fbe469',
                        }
                    },
                ]
            }
        ]
    }
}

/**
 * @description 运力分析 折线
 */
export function centerLines () {
    let color = ["#097cd7", "#b99c00"];
    let echartData = [
        {
            name: "1",
            value1: 100,
            value2: 233,
        },
        {
            name: "2",
            value1: 138,
            value2: 233,
        },
        {
            name: "3",
            value1: 350,
            value2: 200,
        },
        {
            name: "4",
            value1: 173,
            value2: 180,
        },
        {
            name: "5",
            value1: 180,
            value2: 199,
        },
        {
            name: "6",
            value1: 150,
            value2: 233,
        },
        {
            name: "7",
            value1: 180,
            value2: 210,
        },
        {
            name: "8",
            value1: 230,
            value2: 180,
        },
    ];
    let xAxisData = echartData.map((v) => v.name);
    let yAxisData1 = echartData.map((v) => v.value1);
    let yAxisData2 = echartData.map((v) => v.value2);
    const hexToRgba = (hex, opacity) => {
        let rgbaColor = "";
        let reg = /^#[\da-f]{6}$/i;
        if (reg.test(hex)) {
            rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
                "0x" + hex.slice(3, 5)
            )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
        }
        return rgbaColor;
    };
    return {
        color: color,
        tooltip: {
            trigger: "axis",
            textStyle: {
                color: "#fff",
            },
            extraCssText:
                "background: rgba(0,0,0,0.3); border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #fff;border:1px solid rgba(0,0,0,0.5) ",
            axisPointer: {
                type: "shadow",
            },
        },
        grid: {
            top: "3%",
            left: "15%",
            bottom: "15%",
        },
        xAxis: [
            {
                type: "category",
                boundaryGap: false,
                axisLabel: {
                    formatter: "{value}月",
                    textStyle: {
                        color: "rgba(255,255,255,0.5)",
                    },
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                data: xAxisData,
            },
        ],
        yAxis: [
            {
                type: "value",
                name: "",
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,0.5)",
                    },
                },
                nameTextStyle: {
                    color: "#666",
                    fontSize: 12,
                    lineHeight: 40,
                },
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
            },
        ],
        series: [
            {
                name: "司机",
                type: "line",
                smooth: true,
                showSymbol: false,
                zlevel: 3,
                lineStyle: {
                    normal: {
                        color: color[0],
                        shadowBlur: 3,
                        shadowColor: hexToRgba(color[0], 0.5),
                        shadowOffsetY: 8,
                    },
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: hexToRgba(color[0], 0.3),
                                },
                                {
                                    offset: 1,
                                    color: hexToRgba(color[0], 0.1),
                                },
                            ],
                            false
                        ),
                        shadowColor: hexToRgba(color[0], 0.1),
                        shadowBlur: 10,
                    },
                },
                data: yAxisData1,
            },
            {
                name: "车辆",
                type: "line",
                smooth: true,
                showSymbol: false,
                zlevel: 3,
                lineStyle: {
                    normal: {
                        color: color[1],
                        shadowBlur: 3,
                        shadowColor: hexToRgba(color[1], 0.5),
                        shadowOffsetY: 8,
                    },
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: hexToRgba(color[1], 0.3),
                                },
                                {
                                    offset: 1,
                                    color: hexToRgba(color[1], 0.1),
                                },
                            ],
                            false
                        ),
                        shadowColor: hexToRgba(color[1], 0.1),
                        shadowBlur: 10,
                    },
                },
                data: yAxisData2,
            },
        ],
    };
}

/**
 * @description 中心地图
 */
export function mapOption () {
    // const img2 = 'image://://"
    const img2="image://"
    let data = [
        { name: '北京', value: 5 },
        { name: '天津', value: 14 },
        { name: '河北', value: 157 },
        { name: '山西', value: 110 },
        { name: '内蒙古', value: 40 },
        { name: '辽宁', value: 40 },
        { name: '吉林', value: 40 },
        { name: '黑龙江', value: 60 },
        { name: '上海', value: 10 },
        { name: '江苏', value: 60 },
        { name: '浙江', value: 50 },
        { name: '安徽', value: 151 },
        { name: '福建', value: 60 },
        { name: '江西', value: 74 },
        { name: '山东', value: 200 },
        { name: '河南', value: 100 },
        { name: '湖北', value: 40 },
        { name: '湖南', value: 50 },
        { name: '重庆', value: 40 },
        { name: '四川', value: 120 },
        { name: '贵州', value: 135 },
        { name: '云南', value: 90 },
        { name: '西藏', value: 25 },
        { name: '陕西', value: 100 },
        { name: '甘肃', value: 60 },
        { name: '青海', value: 20 },
        { name: '宁夏', value: 110 },
        { name: '新疆', value: 32 },
        { name: '广东', value: 10 },
        { name: '广西', value: 100 },
        { name: '海南', value: 40 },
    ];
    let toolTipData = [
        {
            name: '湖南',
            value: 5,
        },
        {
            name: '河南',
            value: 3,
        },
        {
            name: '浙江',
            value: 24,
        },
        {
            name: '四川',
            value: 35,
        },
        {
            name: '云南',
            value: 27,
        },
        {
            name: '黑龙江',
            value: 13,
        },
        {
            name: '甘肃',
            value: 42,
        }
    ];
    let geoCoordMap = {
        '黑龙江': [127.9688, 45.368],
        '内蒙古': [110.3467, 41.4899],
        "吉林": [125.8154, 44.2584],
        '北京市': [116.4551, 40.2539],
        "辽宁": [123.1238, 42.1216],
        "河北": [114.4995, 38.1006],
        "天津": [117.4219, 39.4189],
        "山西": [112.3352, 37.9413],
        "陕西": [109.1162, 34.2004],
        "甘肃": [103.5901, 36.3043],
        "宁夏": [106.3586, 38.1775],
        "青海": [101.4038, 36.8207],
        "新疆": [87.611053, 43.828171],
        "西藏": [91.117212, 29.646922],
        "四川": [103.9526, 30.7617],
        "重庆": [108.384366, 30.439702],
        "山东": [117.1582, 36.8701],
        "河南": [113.4668, 34.6234],
        "江苏": [118.8062, 31.9208],
        "安徽": [117.29, 32.0581],
        "湖北": [114.3896, 30.6628],
        "浙江": [119.5313, 29.8773],
        "福建": [119.4543, 25.9222],
        "江西": [116.0046, 28.6633],
        "湖南": [113.0823, 28.2568],
        "贵州": [106.6992, 26.7682],
        "云南": [102.9199, 25.4663],
        "广东": [113.12244, 23.009505],
        "广西": [108.479, 23.1152],
        "海南": [110.3893, 19.8516],
        "台湾": [120.702967, 24.123621],
        '上海': [121.4648, 31.2891]
    };
    /**
     * @description 底部圆数据
     * @param data
     * @returns {*[{name:"山西",value:[113,28,100]}]} 经度 维度 值
     */
    let convertData = function (data) {
        let res = [];
        for (let i = 0; i < data.length; i++) {
            let geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value),
                });
            }
        }
        return res;
    };
    /**
     * @description 省份数据
     * @returns {*[[113,30,{name:"山西",value:5}]]} 经度 维度 值
     */
    function scatterData() {
        return toolTipData.map((item) => {
            return [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + 2, item]
        })
    }
    const areaStyle="#040e1c"
    return {
        geo: [
            //向下偏移层
            {
                map: "china",
                aspectScale: 1,
                layoutCenter: ["50%", "51.5%"], //地图位置
                layoutSize: "150%",
                roam: false,
                silent:false,
                itemStyle: {
                    normal: {
                        borderColor: "#fff",
                        borderWidth: 3,
                        areaColor:areaStyle,
                        shadowColor: "#4b8bf2",
                        shadowBlur: 30,
                        shadowOffsetY:10,
                    },
                    emphasis: {
                        disabled:true,
                        areaColor: areaStyle,
                    },
                },
                regions: [
                    {
                        name: "南海诸岛",
                        itemStyle: {
                            areaColor: "rgba(0, 10, 52, 1)",
                            borderColor: "rgba(0, 10, 52, 1)",
                        },
                        emphasis: {
                            areaColor: "rgba(0, 10, 52, 1)",
                            borderColor: "rgba(0, 10, 52, 1)",
                        },
                    },
                ],
                z: 2,
                label:{
                    show:false
                },
                tooltip: {
                    show: false,
                },
            },
            // 向上偏移层
            {
                map: "china",
                aspectScale: 1,
                layoutCenter: ["50%", "49.5%"], //地图位置
                layoutSize: "150%",
                roam: false,
                silent:false,
                itemStyle: {
                    normal: {
                        borderColor: "#fff",
                        borderWidth: 3,
                        areaColor:areaStyle,
                        shadowColor: "#4b8bf2",
                        shadowBlur: 30,
                        shadowOffsetY:-10,
                    },
                    emphasis: {
                        disabled:true,
                        areaColor: areaStyle,
                    },
                },
                regions: [
                    {
                        name: "南海诸岛",
                        itemStyle: {
                            areaColor: "rgba(0, 10, 52, 1)",
                            borderColor: "rgba(0, 10, 52, 1)",
                        },
                        emphasis: {
                            areaColor: "rgba(0, 10, 52, 1)",
                            borderColor: "rgba(0, 10, 52, 1)",
                        },
                    },
                ],
                z: 3,
                label:{
                    show:false
                },
                tooltip: {
                    show: false,
                },
            }
        ],
        series: [
            // 最上层
            {
                type: "map",
                map: "china",
                tooltip: {
                    show: false,
                },
                label: {
                    show: false,
                    color: "#fff",
                    fontSize: 16,
                },
                aspectScale: 1,
                layoutCenter: ["50%", "50%"], //地图位置
                layoutSize: "150%",
                roam: false,
                silent:false,
                itemStyle: {
                    normal: {
                        borderColor: "#5d94d6",
                        borderWidth: 0.8,
                        areaColor: areaStyle
                    },
                    //高亮
                    // emphasis:{
                    //     disabled:true
                    // },
                    emphasis: {
                        disabled:true,
                        label:{
                            color:"#fff"
                        },
                        areaColor: areaStyle,
                    },
                },
                z: 99,
                data: []
            },
            {
                name:"省份数据",
                type: 'scatter',
                coordinateSystem: 'geo',
                geoIndex: 0,
                zlevel: 5,
                label: {
                    normal: {
                        show: true,
                        formatter: function (params) {
                            console.log('params',params)
                            let name = params.data[2].name
                            let value = params.data[2].value
                            let text = `{tline|${name}} : {fline|${value}}万`
                            return text;
                        },
                        color: '#ffd400',
                        backgroundColor: 'rgba(255,212,0,0.3)',
                        borderColor:"#ffd400",
                        borderType:"solid",
                        borderWidth: 1,
                        padding:[3,8],
                        // offset:[0,15],
                        rich: {
                            fline: {
                                color: '#ffd400',
                                fontSize: 14,
                                fontWeight: 600
                            },
                            tline: {
                                // padding: [0, 27],
                                color: '#ffd400',
                                fontSize: 12,
                            },
                        }
                    },
                },
                itemStyle: {
                    color: '#00FFF6',
                    opacity: 1
                },
                // symbol:"none",
                // symbol: img2,
                symbolSize: [0, 0],
                // symbolOffset: [0, -20],
                z: 999,
                data: scatterData(),
            },
            {
                name: '底部圆',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: convertData(toolTipData),
                showEffectOn: 'render',
                rippleEffect: {
                    scale: 5,
                    brushType: 'stroke',
                },
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'bottom',
                        show: false,
                        color: "#fff",
                        distance: 10,
                    },
                },
                symbol: 'circle',
                symbolSize: [20, 10],
                symbolOffset: [0, 10],
                itemStyle: {
                    normal: {
                        color: '#ffd400',
                        shadowBlur: 10,
                        shadowColor: '#ffd400',
                    },
                    opacity: 1
                },
                zlevel: 4,
            },
        ],
    }
}